import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import QtCharts

Rectangle {
    Layout.fillWidth: true
    Layout.fillHeight: true

    ColumnLayout {
        anchors.fill: parent

        ChartView {
            id: chartView
            title: "折线图示例"
            titleFont.bold: true
            titleFont.pointSize: 14

            Layout.fillWidth: true
            Layout.fillHeight: true
            antialiasing: true

            ValueAxis {
                id: axis_x
                min: 0
                max: 10
                tickCount: 11
            }

            ValueAxis {
                id: axis_y
                min: 0
                max: 10
                tickCount: 11
            }

            LineSeries {
                id: series
                name: "line"

                color: "#1296FF"
                width: 3
                bestFitLineColor : "#00FF00"
                bestFitLineVisible : true

                // 设置点是否可见
                pointsVisible : true

                // 设置点标签是否可见
                pointLabelsVisible : true

                // 设置点标签文本颜色
                pointLabelsColor: "#FF0000"

                // 设置点标签字体
                pointLabelsFont.bold: true
                pointLabelsFont.pointSize: 12
                pointLabelsFont.family: "Courier"

                // 设置点标签显示格式
                // 具体格式可能受Qt版本或平台影响
                // 如果数据太多，会影响性能
                // 格式标签限制：不支持更复杂的运算或格式化指令，如果是小数，可能需要对点数据预处理
                pointLabelsFormat : "(@xPoint,@yPoint)"

                // 控制当点标签超出绘图区域时是否被裁剪，默认为true
                // 设为false可允许标签显示在绘图区域之外，但需要注意可能布局重叠。
                pointLabelsClipping : true

                // 只需要一组 x、y轴
                axisX: axis_x
                axisY: axis_y
                //axisXTop: axis_x
                //axisYRight: axis_y

                // 还不确定如何触发
                selectedColor : "#333"

                onClicked: function(point){
                    console.log("onClicked: " + Math.round(point.x) + ", " + Math.round(point.y));
                }
            }

            // Add data dynamically to the series
            Component.onCompleted: {
                for (var i = 0; i <= 5; i++) {
                    var num = Math.floor((Math.random()*10))
                    series.append(i, num);
                }
            }
        }

        Row {
            Layout.minimumHeight: 50

            Button {
                text: "append"
                width: 100
                height: 25

                onClicked: {
                    var num = Math.floor((Math.random()*10))
                    series.append(series.count, num)
                    axis_x.min++;
                    axis_x.max++;

                }
            }

            Button {
                text: "remove"
                width: 100
                height: 25

                onClicked: {
                    if (series.count > 0) {
                        series.removePoints(series.count-1, 1)
                        axis_x.min--;
                        axis_x.max--;
                    }
                }
            }

            Button {
                text: "Left"
                width: 100
                height: 25

                onPressed: {
                    axis_x.min--;
                    axis_x.max--;
                }
            }

            Button {
                text: "Right"
                width: 100
                height: 25

                onPressed: {
                    axis_x.min++;
                    axis_x.max++;
                }
            }
        }
    }
}
